import { useState } from 'react';
import style from './index.module.scss';
import bg from '@/assets/images/mid-autumn/main@2x.png';
import Reward from '@/assets/images/mid-autumn/bg-reward@2x.png';
import Rule from '@/assets/images/mid-autumn/bg-rule@2x.png';
import RewardDesc1 from '@/assets/images/mid-autumn/reward-desc1@2x.png';
import RewardDesc2 from '@/assets/images/mid-autumn/reward-desc2@2x.png';
import Content from './content';
// import { closeFun } from './util';
const Index = () => {
    const [showPage, setShowPage] = useState(0);
    const [type, setType] = useState(1);
    return (
        <>
            {showPage !== 1 && (
                <div className={style.container}>
                    <img src={bg} alt="背景图" />
                    <div
                        className={`${style.btn} ${style.btn1}`}
                        onClick={() => setShowPage(1)}
                    >
                        {/* 奖励 */}
                    </div>
                    <div
                        className={`${style.btn} ${style.btn2}`}
                        onClick={() => setShowPage(2)}
                    >
                        {/* 规则 */}
                    </div>

                    <Content type={1} />
                </div>
            )}
            {showPage === 1 && (
                <div className={style.questionWrap}>
                    <div
                        className={style.btn_back}
                        onClick={() => setShowPage(0)}
                    ></div>
                    <div className={style.rewardBox}>
                        <div className={style.btn_box}>
                            <div
                                className={`${style.btn_switch}  ${
                                    type === 1 ? '' : style.no_select
                                }`}
                                onClick={() => setType(1)}
                            >
                                送月饼
                            </div>
                            <div
                                className={`${style.btn_switch} ${
                                    type === 2 ? '' : style.no_select
                                } `}
                                onClick={() => setType(2)}
                            >
                                收/找月饼
                            </div>
                        </div>
                        <img
                            src={type === 2 ? RewardDesc2 : RewardDesc1}
                            alt="图片"
                        />
                    </div>
                </div>
            )}
            {showPage === 2 && (
                <div className={style.questionWrap1}>
                    <div className={style.content_box}>
                        <img src={Rule} alt="图片" />
                        <div className={style.ruleDetail}>
                            <p>
                                1、本活动时间为9月11日-9月17日，截止到9月17日23:59:59；
                                <br />
                                2、送出/收到专属中秋月饼礼物，直刷礼物：1钻石对应1点团圆值；梅花A礼物：1钻石对应5团圆值。
                                <br />
                                3、收月饼排行榜前三名即可获得额外钻石奖励+虚拟道具奖励,（额外奖励需满足最低团圆值要求，第一名最低51000团圆值;第二名最低26000团圆值;第三名最低16000团圆值，达不到要求不予发放）。
                                <br />
                                4、活动截止后如果送月饼/收月饼/找月饼如果出现数值相同的情况，如第一名和第二名都是1000团圆值的情况，先到的为第一名，后到的为第二名。
                                <br />
                                5、奖励发放时间将在活动结束后5个工作日发放，若奖励未到账，请请关注微信公众号「pupu找搭子」私聊进行领取；
                                <br />
                                6、最终解释权归PUPU找搭子所有，该活动与苹果公司无关。
                                <br />
                            </p>
                        </div>
                        <div
                            className={style.btn_back_bottom}
                            onClick={() => setShowPage(0)}
                        ></div>
                    </div>
                </div>
            )}
        </>
    );
};

export default Index;
